import "./003Style.css";
import logo from "../assets/6f9d95ba6e17f400bed9f7d1e38760f550c284f2.jpg";
import axios  from "axios";
import { useEffect, useState } from "react";



const tab = [
  { type: 1, name: "最新" },
  { type: 2, name: "最热" },
];

const BiliCommentDemo = () => {
  const [listData, setListData] = useState<{
    id: number;
    username: string;
    content: string;
    time: string;
    likeCount: number;
  }[]>([]);
  const [active, setActive] = useState<number | undefined>(undefined);
  const [inputValue, setInputValue] = useState("");


useEffect(() => {
  const getList=async()=>{
    //需要开启Json Server服务开启后端接口、npx json-server db.json
    const res = await axios.get("http://localhost:3000/commentList");
    console.log(res.data);
    setListData(res.data);
  }
  getList()
}, []);

  //   修改tab值显示内容
  const tabOnClick = (index: number) => {
    if (tab[index].name == "最热") {
      setListData([...listData].sort((a, b) => b.likeCount - a.likeCount));
    } else if (tab[index].name == "最新") {
      setListData(
        [...listData].sort(
          (a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()
        )
      );
    }
    setActive(index);
  };

  const goSubmit = () => {
    setListData([
      ...listData,
      {
        id: listData.length + 1,
        username: "WuLong",
        content: inputValue,
        time: new Date().toLocaleString(),
        likeCount: 0,
      },
    ]);
    setInputValue("");
  };
  return (
    <>
      <div className="container">
        <div className="header">
          <span className="header-title">评论</span>
          <span>{listData.length}</span>
          <div className="span">
            <ul>
              {tab.map((item, index) => (
                <li key={item.type}>
                  <span
                    className={active === index ? "active" : ""}
                    onClick={() => tabOnClick(index)}
                  >
                    {item.name}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="goOn">
          <div className="nav">
            <img src={logo}></img>
          </div>
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
          <button className="submit" onClick={goSubmit}>
            发布
          </button>
        </div>
        <div className="content-container">
          <ul>
            {listData.map((item) => (
              <li key={item.id}>
                <div className="name">{item.username}</div>
                <div className="content">{item.content}</div>
                <div className="footer">
                  <div className="time">{item.time}</div>
                  <div className="great">点赞:{item.likeCount}</div>
                  <div
                    className="del"
                    onClick={() =>
                      setListData(
                        (listData) =>
                          (listData = listData.filter(
                            (ev) => ev.id !== item.id
                          ))
                      )
                    }
                  >
                    删除
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
};

export default BiliCommentDemo;
